<template> 
	<view class="grab-sheet">
		<view class="head_box">
			<view class="head" >
				<view class="serach">
					<view class="adress">
						<view class="title">西安</view>
						<view class="icon">
							<image class="img" src="/static/icon/down.png" mode=""></image>
						</view>

					</view>
					<!-- 下个版本放出来 -->
					<view style="display: none;" class="search_input" @tap="toSearch">
						<image class="s_img" src="/static/icon/search.png" mode=""></image>
						<view class="s_input">请输入酒店名称</view>
						
					</view>
					<view class="order" @tap="openOrderDetil('1')">
						<view class="icon">
							<image class="img" src="/static/personal-center/confirmed.png" mode=""></image>
							<view v-if="dds != 0" class="message">
								{{dds}}
							</view>
						</view>
					</view>
				</view>

				<view class="list" style="display: none;">
					<view class="item">
						<view class="box">
							<view class="title">全西安</view>
							<view class="icon">
								<image class="img" src="/static/icon/down-999999.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="box">
							<view class="title">发布时间</view>
							<view class="icon">
								<image class="img" src="/static/icon/down-999999.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="box">
							<view class="title">距我最近</view>
							<view class="icon">
								<image class="img" src="/static/icon/down-999999.png" mode=""></image>
							</view>
						</view>
					</view>

				</view>

			</view>


		</view>

		<mescroll-uni  :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit"
		 @emptyclick="emptyClick" @topclick="topClick">
			<view class="list grab_cont" v-if="have == '1'">
				<view class="item" v-for="(x,i) in list" :key="i">
					<view class="box" @tap="goDetail(x.id)">
						<view class="name">{{x.name}}<text> ({{x.hotel_order_count}}间)</text></view>
						<view class="adress">
							<view class="icon">
								<image src="/static/icon/fill.png" mode=""></image>
							</view>
							<view class="title">
								{{x.address || '陕西省西安市'}}
							</view>
							<view class="distance">
								{{x.distance + 'km'}}
							</view>
						</view>
						<view class="line"></view>
						<view class="time_order">
							<view class="time">更新时间: {{x.update_time | dateFrm}}</view>
							<view class="order">立即抢单</view>
						</view>
					</view>
				</view>
			</view>
			<view class="have0"  v-if="have == '0'">
				<view  style="width: 100%;height: 30vh;" class="show">
					<image style="position:absolute;left: 0;right: 0;bottom: 0;margin: 0 auto; width:80upx;height: 80upx;" class="load_img"
					 src="/static/icon/loading.png" mode=""></image>
				</view>
			</view>
			<view class="have_1"  v-if="have == '-1'">
				<view  class="show">
					<view class="show_null">
						<image src="/static/bg/null.png" mode=""></image>
					</view>
					<view class="title">酒店还没有发布订单哦~</view>
				</view>
			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	let searchCon = {
		search: '',
		show_waiting_order: true,
		show_distance: true
	}
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import moment from "moment";
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				key: 'value',
				list: [],
				total: '',
				have:'0',
				mescroll: null, //mescroll实例对象
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					autoShowLoading: true, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
					isLock: false, // 是否锁定下拉刷新,默认false;
					isBoth: true, // 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认true,两者可同时触发;
					offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
					inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
					minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '正在刷新...' // 加载中的提示文本
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					isLock: false, // 是否锁定上拉加载,默认false;
					isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- END --', // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						src: "http://www.mescroll.com/img/mescroll-totop.png", // 图片路径
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300 // 回到顶部的动画时长,默认300ms
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "http://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效
						top: "35%", // fixed定位的top值 (完整的单位值,如 "35%"; "300upx")
						zIndex: 99 // fixed定位z-index值
					}
				}
			}
		},
		filters: {
			dateFrm: function(time) {
				let jsTime = time * 1000;
				return moment(jsTime).format('YYYY-MM-DD HH:mm');
			}
		},
		onUnload() {
			this.mescroll = null;
		},
		//注册滚动到底部的事件,用于上拉加载
		onReachBottom() {
			this.mescroll && this.mescroll.onReachBottom();
		},
		//注册列表滚动事件,用于下拉刷新
		onPageScroll(e) {
			this.mescroll && this.mescroll.onPageScroll(e);
		},
		methods: {
			/**
			 * 打开抢单详情
			 */
			goDetail(e) {
				if (this.isLogin().hotel_id) {
					uni.showToast({
						icon: 'none',
						title: '酒店方不可抢单'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/cleaner/order/grab-details?id=' + e
				});
			},
			/**
			 * 打开订单详情
			 */
			openOrderDetil(e) {
				uni.navigateTo({
					url: '/pages/cleaner/order/will-be-cleaned?id=' + e
				});
			},
			/**
			 * 获取信息
			 */
			getSearchData(ajaxData) {
				return new Promise((res) => {
					this.req({
						url: 'user/hotel',
						method: 'get',
						data: ajaxData
					}, (data) => {
						res(data);
					}, (data) => {
						res(data);
					});
				});

			},
			/**
			 * 刷新数据
			 */
			async refreshData() {
				let resLoca = await this.getLocation();
				searchCon.longitude = resLoca.longitude;
				searchCon.latitude = resLoca.latitude;
				let resData = await this.getSearchData(searchCon);
				console.log(resData);
				if(resData.data.status == 1){
					this.list = resData.data.data.list;
					this.total = resData.data.data.total;
					this.have = '1';
				}else{
					this.have = '-1';
				}
				
			},
			/**
			 * 获取当前经纬度
			 */
			getLocation() {
				return new Promise((res) => {
					uni.getLocation({
						success: function(data) {
							res(data);
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
						}
					});
				});

			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				mescroll.resetUpScroll();
				this.refreshData();
				setTimeout(()=>{
					mescroll.endSuccess(10);
				},500)
				
			},
			upCallback(mescroll) {

			},
			emptyClick() {
				console.log("点击了按钮");
			},
			// 点击回到顶部按钮的回调
			topClick() {
				console.log('点击了回到顶部按钮');
			},
			//打开搜索页面
			toSearch() {
				uni.navigateTo({
					url: '/pages/cleaner/search/search'
				});
			}

		},
		mounted() {
			this.refreshData();

		},
		computed: {
			dds() {
				return this.$store.state.cleaner.dds;
			}
		}
	}
</script>

<style lang="scss" scoped>
	$head:var(--status-bar-height);
	.load_img {
		-webkit-animation: myfirst 1.5s linear infinite;
	}
	
	@keyframes myfirst {
		from {
			transform: rotate(0deg)
		}
	
		to {
			transform: rotate(360deg)
		}
	}
	.show {
		position: relative;
		box-sizing: border-box;
		padding-top: 190upx;
		.show_null {
			
			display: flex;
			align-items: center;
			justify-content: center;
	
			image {
				width: 345upx;
				height: 310upx;
			}
		}
	
		.title {
			position: absolute;
			width: 100%;
			top: 460upx;
			left: 0;
			text-align: center;
			font-size: 24upx;
			color: #999999;
		}
	}
	.grab-sheet {
		background: #F8F8F8;
		.head_box {
			width: 100%;
			height: 88upx;

			.head {
				position: fixed;
				/* #ifdef APP-PLUS */
				top: $head;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				top: 0;
				/* #endif */
				z-index: 5;

				left: 0;
				width: 100%;
				height: 168upx;

				.serach {
					width: 100%;
					height: 88upx;

					background: #3595f9;
					box-sizing: border-box;

					.adress {

						float: left;
						box-sizing: border-box;
						margin: 31upx 24upx;
						width: 76upx;

						.title {
							float: left;
							font-size: 26upx;
							line-height: 1;
							color: #FFFFFF;
						}

						.icon {
							width: 16upx;
							height: 100%;
							float: left;

							.img {
								margin-left: 7upx;
								margin-top: 7upx;
								float: left;
								width: 16upx;
								height: 16upx;
							}
						}
						
						
					}
					.search_input{
						float: left;
						margin-top: 15upx;
						position: relative;
						width: 524upx;
						height: 60upx;
						border-radius: 60upx;
						background: #FFF;
						.s_img{
							position: absolute;
							top: 18upx;
							left: 32upx;
							width: 25upx;
							height: 25upx;
						}
						.s_input{
							position: absolute;
							left: 71upx;
							height: 60upx;
							line-height: 60upx;
							font-size: 24upx;
							color: #999999;
						}
					}
					.order {
						float: right;
						width: 98upx;
						height: 100%;
						padding: 26upx 23upx 26upx 40upx;
						box-sizing: border-box;

						.icon {
							width: 36upx;
							height: 36upx;
							position: relative;

							.img {
								position: absolute;
								float: left;
								width: 36upx;
								height: 36upx;
							}

							.message {
								position: absolute;
								top: -10upx;
								right: -10upx;
								width: 26upx;
								height: 26upx;
								text-align: center;
								line-height: 26upx;
								font-size: 18upx;
								background: #f93735;
								color: #FFFFFF;
								border-radius: 50%;
							}
						}
					}
				}

				.list {
					height: 80upx;
					width: 100%;
					background: #FFFFFF;
					border-bottom: 1upx solid #e5e5e5;

					.item {
						float: left;
						height: 100%;
						width: 33.33333333333%;
						display: flex;
						align-items: center;
						justify-content: center;

						.box {
							height: 24upx;
							width: auto;

							.title {
								font-size: 24upx;
								color: #999999;
								float: left;
							}

							.icon {
								float: left;
								width: 16upx;
								height: 16upx;
								margin: 8upx;

								image {
									width: 100%;
									height: 100%;
									float: left;
								}
							}
						}
					}
				}

			}


		}

	}
	.have0,.have_1{
		width: 100%;
		min-height:calc(100vh - 186upx);
		background: white;
	}
	.grab-sheet  .list.grab_cont {
		width: 100%;
		min-height:calc(100vh - 206upx);
		// background: red;
		.item {
			
			width:calc(100% - 48upx);
			margin: 0 auto;
			margin-top: 20upx;
			border-radius: 8upx;
			height: 265upx;
			position: relative;
			box-sizing: border-box;
			padding: 0 24upx;
			background: #FFFFFF;
			box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.04);
			.box {
				width: 100%;
				height: 245upx;

				.name {
					padding-top: 33upx;
					font-size: 32upx;
					line-height: 1;
					color: #333333;

					text {
						color: #3595f9;
					}
				}

				.adress {
					line-height: 1;
					height: 26upx;
					color: #999999;
					font-size: 26upx;
					margin-top: 28upx;

					.icon {
						float: left;
						width: 26upx;
						height: 26upx;

						image {
							width: 26upx;
							height: 26upx;
							float: left;
						}
					}

					.title {
						margin-left: 6upx;

						float: left;
					}

					.distance {
						float: right;
					}
				}

				.line {
					margin-top: 32upx;
					width: 100%;
					height: 1upx;
					background: #e5e5e5;
					transform: scaleY(0.5);
				}

				.time_order {
					width: 100%;
					height: 102upx;
					font-size: 20upx;

					.time {
						color: #999999;
						line-height: 40upx;
						text-align: center;
						width: 300upx;
						height: 40upx;
						margin: 30upx 0;
						background: red;
						float: left;
						border-radius: 8upx;
						background: #f8f8f8;
					}

					.order {
						width: 160upx;
						height: 60upx;
						text-align: center;
						line-height: 60upx;
						border-radius: 7upx;
						font-size: 24upx;
						color: #FFFFFF;
						background-color: #3595f9;
						margin-top: 21upx;
						float: right;
					}
				}
			}
		}

		// .item:after {
		// 	content: '';
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0;
		// 	width: 100%;
		// 	height: 20upx;
		// 	background: #F0F0F0;
		// }
	}
</style>
